<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>焦点轮播图</title>
    <link href="css.css" rel="stylesheet" type="text/css">
    <script src="function.js" type="text/javaScript"></script>
</head>

<body>
    <div id="container">
        <div>
            <ul id="imgList" style="left: -620px;">
                <li><img src="img/5.jpg" alt=""></li>
                <li><img src="img/1.jpg" alt=""></li>
                <li><img src="img/2.jpg" alt=""></li>
                <li><img src="img/3.jpg" alt=""></li>
                <li><img src="img/4.jpg" alt=""></li>
                <li><img src="img/5.jpg" alt=""></li>
                <li><img src="img/1.jpg" alt=""></li>
            </ul>
            <div id="button">
                <a href="javascript:;"></a>
                <a href="javascript:;"></a>
                <a href="javascript:;"></a>
                <a href="javascript:;"></a>
                <a href="javascript:;"></a>
            </div>
        </div>
        <!--构造箭头，箭头中有些相同的样式，就使用class选择器，不同的样式就用id选择器-->
        <a id="prev" class="arrow">&lt;</a>
        <a id="next" class="arrow">&gt;</a>

    </div>
</body>

</html>